import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:myflutterproject/utils/overScrollBehavior.dart';

class ContainerDemo extends StatelessWidget {
  /**
   * Container运用场景
      设置宽高：flutter中大部分组件不能设置宽高，需要依赖容器。
      添加背景颜色
      添加背影图像
      添加内外边距：padding和margin
      添加边框
      设置圆角
      设置child对齐：居中、居左、居右、居上、居下或偏移
      设置变换：旋转或变形
   *  属性
      alignment：child对齐的属性，可以设置居中、居左、居右、居上、居下等等。
      alignment已经在我的另外一篇文章中详细说明：Flutter Stack组件
      padding：内边距。width和height包含padding值。
      color：背景颜色。
      decoration：设置装饰，比如边框、圆角、背景图片等。不能给Container同时设置decoration和color属性，如果要同时设置，给decoration设置color就可以。
      foregroundDecoration，设置前景装饰。
      width：宽度。
      height：高度。
      constraints：大小范围约束，constraints有四个属性：minWidth、minHeight、maxWidth、maxHeight。
      margin: 外边距。
      transform：变换效果，比如翻转、旋转、变形等。
      child：子组件，可以不设置。
   */
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Container示例'),
        centerTitle: true,
      ),
      body: ContainerPage(),
    );
  }
}

class ContainerPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ScrollConfiguration(
        behavior: OverScrollBehavior(),
        child: ListView(
          children: <Widget>[
            Container1(),
            Container2(),
            Container3(),
            Container4(),
            Containerdemo(),
          ],
        ),
      ),
    );
  }
}

//约束、对齐与变换
class Container1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      //大小范围约束
      constraints: BoxConstraints.expand(
        height: Theme.of(context).textTheme.subtitle1!.fontSize! * 1.1 + 200,
      ),
      padding: EdgeInsets.all(20),
      color: Colors.blue[600],

      //对齐属性
      alignment: Alignment.center,
      child: Text(
        '约束对齐与变换',
        style: TextStyle(fontSize: 20, color: Colors.white),
      ),
      //旋转
      // transform: Matrix4.rotationZ(0.1),
    );
  }
}

//添加背景图片
class Container2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      //大小约束范围
      constraints: BoxConstraints.expand(width: 100, height: 150),
      //边框装饰
      decoration: BoxDecoration(
        //外部边框颜色弧度
        border: Border.all(width: 2, color: Colors.red),
        color: Colors.grey,
        borderRadius: BorderRadius.all(Radius.circular(20)),
        image: DecorationImage(
          image: AssetImage('images/test.png'),
        ),
      ),
      padding: EdgeInsets.all(8.0),
      margin: EdgeInsets.symmetric(horizontal: 15, vertical: 35),
      //对齐方式
      alignment: Alignment.center,
      child: Text(
        '添加背景图片',
        style: TextStyle(color: Colors.red),
      ),
    );
  }
}

//不设置宽高和约束，有child，size会尽可能小
class Container3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('不约束宽高，有child,size尽可能小（不约束宽高，没有child，size会尽可能大）',
          style: TextStyle(fontSize: 20, color: Colors.white)),
      color: Colors.red,
    );
  }
}

//宽高不在约束内会无效
class Container4 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 20),
      //约束范围
      constraints: BoxConstraints(
          minWidth: 200, minHeight: 200, maxWidth: 400, maxHeight: 400),
      width: 20,
      height: 20,
      child: Text(
        '宽高不在约束范围内会无效',
        style: TextStyle(fontSize: 20, color: Colors.white),
      ),
      color: Colors.green,
      //对齐方式
      alignment: Alignment.center,
    );
  }
}

//旋转
class Containerdemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      //设置宽高
      width: 300,
      height: 400,
      //设置内外边距
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
      //沿x轴旋转
      transform: Matrix4.rotationZ(0.2),
      //边框装饰
      decoration: BoxDecoration(
          color: Colors.lightBlueAccent[200],
          //边框
          border: Border.all(
              color: Color(0xff6d9eeb),
              //边框粗细
              width: 8.0),
          //边框弧度
          borderRadius: BorderRadius.all(Radius.circular(5.0))),
      child: Center(
        child: Text(
          '旋转',
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}
